<template>
  <div class="es-block">
    <Title>顺义区防汛抢险救援队伍</Title>
    <div style="width: 100%; height: 100%; padding-top: 20px">
      <Chart :option="option" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Title from '../Title.vue'
import Chart from '@/components/chart/Chart.vue'
import allData from '@/assets/data/rank.json'
import * as echarts from 'echarts'
const colorArr = [
  ['#0BA82C', '#4FF778'],
  ['#2E72BF', '#23E5E5'],
  ['#5052EE', '#AB6EE5'],
]
const startValue = ref(0)
const endValue = ref(9)
const barWidth = 20
const option = ref({
  grid: {
    top: '10%',
    left: '5%',
    right: '5%',
    bottom: '5%',
    containLabel: true,
  },
  tooltip: {
    show: true,
  },
  legend: {
    data: ['队伍数量', '人员数量'],
    textStyle: {
      color: '#eee',
    },
  },
  xAxis: [
    {
      type: 'category',
      data: ['区级队', '镇(街道)级', '村(社区)级', '其它级'],
    },
  ],
  yAxis: {
    type: 'value',
  },
  dataZoom: {
    show: false,
    startValue: startValue.value,
    endValue: endValue.value,
  },
  series: [
    {
      type: 'bar',
      name: '队伍数量',
      data: allData.map((item) => item.teamCount),
      barWidth: barWidth,
      itemStyle: {
        borderRadius: [barWidth / 2, barWidth / 2, 0, 0],
        color: (arg) => {
          let targetColorArr: string[] | null = null
          targetColorArr = colorArr[2]
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: targetColorArr[0],
            },
            {
              offset: 1,
              color: targetColorArr[1],
            },
          ])
        },
      },
    },
    {
      type: 'bar',
      name: '人员数量',
      data: allData.map((item) => item.personCount),
      barWidth: barWidth,
      itemStyle: {
        borderRadius: [barWidth / 2, barWidth / 2, 0, 0],
        color: (arg) => {
          let targetColorArr: string[] | null = null
          targetColorArr = colorArr[0]
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: targetColorArr[0],
            },
            {
              offset: 1,
              color: targetColorArr[1],
            },
          ])
        },
      },
    },
  ],
})
</script>

<style lang="scss" scoped>
.es-block {
  width: 100%;
  height: 100%;
}
</style>
